<template>
    <div class="deptAllocation" v-loading="loading">
        <el-container class="boxs">
            <el-header class="header">
                <el-row style="margin-bottom: 10px">
                    <div class="flex" style="margin:0 15px 0 0;line-height: 30px">
                        <span style="margin-right: 10px">{{ $t('webAuto.bumenmingchen')}}：</span>
                        <el-input v-model="data.departmentName" style="width: 240px" :placeholder="$t('webAuto.enterQuery')" />
                    </div>
                    <el-button plain @click="deptClick"><el-icon>
                            <Search />
                        </el-icon>{{ $t('webAuto.query')}}</el-button>
                    <el-button type="info" plain @click="data.departmentName = '', deptList()"><el-icon>
                            <RefreshLeft />
                        </el-icon>{{ $t('calendar.rest')}}</el-button>
                    <!-- <el-button type="primary" plain @click="udeptDeptClick"><el-icon>
                            <Edit />
                        </el-icon>编辑</el-button> -->
                </el-row>
            </el-header>
            <el-main class="list">
                <el-table :data="data.deptTable" style="width: 100%;height: 95%;" border
                    :header-cell-style="{ color: '#000', fontWeight: 'bold' }" highlight-current-row
                    :cell-style="{ whiteSpace: 'pre-wrap' }">
                    <!-- <el-table-column type="selection" width="50" align="center" /> -->
                    <el-table-column label="序号" width="70" align="center">
                        <template #default="scope">{{ (data.currentPage - 1) * data.pageSize + scope.$index + 1
                            }}</template>
                    </el-table-column>
                    <el-table-column prop="parentDeptName" :label="$t('webAuto.shangjiBM')" width="240" />
                    <el-table-column prop="deptName" :label="$t('webAuto.bumenmingchen')" width="240" />
                    <el-table-column prop="userName" :label="$t('webAuto.Manager')" width="180" />
                    <el-table-column prop="leader" :label="$t('webAuto.workNumber')" width="180" />
                    <el-table-column fixed="right" :label="$t('webAuto.operate')" width="200" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="updeptDeptClick(scope.row)">{{ $t('webAuto.EditorialHead')}}</el-button> 
                            <el-button link type="danger" size="small" @click="handleClick(scope.row)">
                                {{ $t('webAuto.ClearCharge')}}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination :currentPage="data.currentPage" :page-size="data.pageSize" :page-sizes="[16, 30, 50]"
                        :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-main>
            <org-picker ref="orgPicker" :position="'center'" :multiple="false" type="user" :selected="_value"
                @ok="saveDeptClick"></org-picker>
        </el-container>
    </div>
</template>

<script setup>
import { getDepartments, getDepartUpdate } from '@/api/valueSet'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import OrgPicker from '../../../components/common/OrgPicker.vue'
import { useI18n } from 'vue-i18n';


const { t } = useI18n();
// 表格绑定的样式
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let loading = ref('false')
const data = reactive({
    deptTable: [],
    departmentName: '',
    pageSize: 16,
    currentPage: 1,
    total: 0,
    rowLi: {}
})
onMounted(() => {
    deptList()
})
const deptList = () => {
    getDepartments({
        departmentName: data.departmentName,
        pageSize: data.pageSize,
        pageNo: data.currentPage
    }).then(res => {
        loading.value = false
        data.deptTable = res.data.records
        data.total = res.data.total
    }).catch((e) => {
        data.deptTable = []
        data.total = 0
        loading.value = false
    })
}

const deptClick = () => {
    if (data.departmentName == '') {
        ElMessage.error(t('webAuto.qingxianSRBM'))
    }
    deptList()
}

// 表格分页
const handleSizeChange = val => {
    data.pageSize = val
    deptList()
}
const handleCurrentChange = val => {
    data.currentPage = val
    deptList()
}

// 修改部门负责人// 添加人员信息
const orgPicker = ref()
const _value = ref([])
const updeptDeptClick = (e) => {
    data.rowLi = e
    console.log(e)
    if (data.rowLi.length == 0) {
        ElMessage.error(t('webAuto.qingxianJSzaiRY'))
    } else {
        orgPicker.value.show()
    }
}

const saveDeptClick = (val) => {
    console.log(val)
    data.rowLi.leader = val[0].id
    getDepartUpdate(data.rowLi).then(res => {
        ElMessage.success(t('webAuto.BMFZRChenggong'))
        // window.location.reload()
        deptList()
    }).catch(e => {
        ElMessage.error(e + t('webAuto.BMFZRShbai'))
    })
}

// 删除负责人
const handleClick=(e)=>{
    console.log(e)
    data.rowLi = e
    data.rowLi.leader=''
    getDepartUpdate(data.rowLi).then(res => {
        ElMessage.success(t('webAuto.BMFZRQKChenggong'))
        // window.location.reload()
        deptList()
    }).catch(e => {
        ElMessage.error(e + t('webAuto.BMFZRSQKhbai'))
    })
}
</script>


<style scoped lang="less">
@import "index.less";
</style>